<template>
	<div class="express">
		<div class="common-title">
            <h1>快递单填写</h1>
            <p>EXPRESS FORM FILING</p>
        </div>
		<van-cell-group>
			<!-- <van-field
	        v-model="company"
	        label="快递公司"
	        placeholder="请选择"
	        :readonly = true
	        right-icon="arrow"
	        input-align="right"
	        @focus="companyPick"
	      /> -->
		  	<!-- <p class="express-company"><span>快递公司</span><span>EMS</span></p> -->
			<van-field v-model="expressOrder" label="快递单号" placeholder="请填写" />
		</van-cell-group>
		<div class="btn-box">
			<button @click="addExpress">填写完毕</button>
		</div>
		<van-popup v-model="companyShow" position="bottom">
			<van-picker title="快递公司选择" show-toolbar value-key="e_name" :columns="companyList" @confirm="onConfirmSoil" @cancel="onCancel" @change="onChangeSoil" />
		</van-popup>
	</div>
</template>
<script>
	import {
		expressList,
		editExpress
	} from "@/api/common";
	export default {
		name: "express",
		data() {
			return {
				expressOrder: "",
				company: '',
				companyId: '',
				companyList: [],
				companyShow: false,
				key: localStorage.getItem('userKey'),
                // key: 'aa3ab733b690faa86c271f6bbd91db41',
			};
		},
		mounted() {
			this.getExpressList();
		},
		methods: {
			addExpress() {
				editExpress({
					key: this.key,
					order_id: this.$route.query.order_id,
					express_id: 8,
					shipping_code: this.expressOrder,
				}).then(res => {
					this.$router.push({
						name: 'all-orders',
						query: {
							orders_id: '20'
						}
					})
				})
			},
			companyPick() {
				this.companyShow = true;
			},
			onConfirmSoil(value, index) {
				this.company = value.e_name;
				this.companyId = value.id;
				this.companyShow = false;
			},
			onCancel() {
				this.companyShow = false;
			},
			onChangeSoil(value, index) {
			},
			getExpressList() {
				expressList().then(res => {
					this.companyList = res.data.datas.data;
				})
			},
		},
	};
</script>
<style scoped>
	.btn-box {
	  border-top: 15px solid #f5f5f5;
	  padding-top: 80px;
	  text-align: center;
	}
	.btn-box button {
		width: 325px;
		height: 40px;
		background: linear-gradient( 90deg, rgba(65, 199, 146, 1), rgba(56, 164, 148, 1));
		border-radius: 40px;
		color: #fff;
		border: none;
	}
	.express-company {
		width: 94%;
		margin: 0 auto;
		height: 47px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		color: #333;
		font-size: 16px;
	}
</style>